<template>
  <div>
    <div v-for="(item, index) in eleData" :key="index">
      <table class="table table-bordered table-border-black">
        <tbody>
          <tr>
            <td>表号</td>
            <td>{{ item.ele_table_no }}</td>
            <td>户名</td>
            <td>{{ item.ele_table_account }}</td>
          </tr>
          <tr>
            <td>地址</td>
            <td>{{ item.ele_table_address }}</td>
            <td>联系电话</td>
            <td>{{ item.ele_table_phone }}</td>
          </tr>
          <tr>
            <td>备注</td>
            <td colspan="3">{{ item.remark }}</td>
          </tr>
        </tbody>
      </table>

      <div class="mb-3">
        <el-echarts
          theme="macarons"
          :height="400"
          :width="width"
          @onInit="c => onInit(c, index)"
          v-show="!imgType"
          :option="item.option"
        ></el-echarts>
        <img height="400" class="w-100" v-show="imgType" :src="item.imgData" alt="" />
      </div>

      <table class="table table-bordered table-border-black text-center">
        <tbody>
          <tr>
            <td>年月</td>
            <td>电费</td>
            <td>同比增长</td>
            <td>电量</td>
            <td>同比增长</td>
          </tr>
          <tr v-for="(fee, j) in item.eleFee" :key="`fee-${j}`">
            <td>{{ fee.ele_date }}</td>
            <td>{{ fee.ele_fee }}</td>
            <td>{{ fee.fee_compare }}</td>
            <td>{{ fee.ele_amount }}</td>
            <td>{{ fee.ele_amount_compare }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import { echartsXFormatter } from '@vimi/utils-tool'

export default {
  components: {},
  props: {
    customerRelatedId: String,
    imgType: Boolean,
    width: {
      type: [Number, String],
      default: '100%',
    },
  },
  data() {
    return {
      eleData: [],
      option: null,
    }
  },
  computed: {},
  watch: {
    customerRelatedId() {
      this.getData()
    },
  },
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    onInit(chart, index) {
      this.eleData[index].chart = chart
    },
    async getData() {
      if (!this.customerRelatedId) {
        return
      }

      const [res] = await this.$utils.promise(
        this.$api.getData('credit', 'datum_customer_ele_table', {
          'customer_related_id.eq': this.customerRelatedId,
        })
      )

      if (res) {
        const data = res.data || []
        this.eleData = data.map(item => {
          item.eleFee = []
          item.option = null
          item.imgData = ''
          item.chart = null
          return item
        })
        for (const d of this.eleData) {
          this.$api
            .getData(
              'credit',
              'datum_customer_ele_fee',
              {
                'credit_ele_table_id.eq': d.credit_ele_table_id,
              },
              { ele_date: 'desc' }
            )
            .then(res => {
              if (res && res.data) {
                d.eleFee = res.data || []

                const xData = []
                const aData = []
                const bData = []
                const ascData = [...d.eleFee]
                ascData.sort((a, b) => (a.ele_date > b.ele_date ? 1 : -1))
                for (let t of ascData) {
                  xData.push(t.ele_date)
                  const fee = Number.parseFloat(t.ele_fee)
                  const nowFee = isNaN(fee) ? 0 : fee
                  aData.push(nowFee)
                  const compare = Number.parseFloat(t.fee_compare.replace(/(.*)%$/, '$1'))
                  // const lastFee = isNaN(compare) ? '-' : Math.round(nowFee * (1 + compare / 100) * 100) / 100
                  const lastFee = isNaN(compare)
                    ? '-'
                    : (Math.round(nowFee / (1 + compare / 100)) * 100) / 100
                  bData.push(lastFee)
                }

                d.option = {
                  backgroundColor: '#eff8fe',
                  title: {
                    text: '电费明细',
                    subtext: '',
                    left: 'center',
                  },
                  tooltip: {
                    trigger: 'axis',
                  },
                  legend: {
                    top: 32,
                    data: ['今年', '上年同期'],
                  },
                  xAxis: [
                    {
                      type: 'category',
                      data: xData,
                      axisLabel: {
                        formatter: v => echartsXFormatter(v, 5),
                      },
                    },
                  ],
                  yAxis: [
                    {
                      type: 'value',
                      name: '电费使用',
                    },
                  ],
                  series: [
                    {
                      name: '今年',
                      type: 'line',
                      data: aData,
                    },
                    {
                      name: '上年同期',
                      type: 'line',
                      data: bData,
                    },
                  ],
                }

                if (this.customerRelatedId && d.chart && d.chart.getDataURL) {
                  d.chart.on('finished', () => {
                    d.imgData = d.chart.getDataURL()
                  })
                }
              }
            })
        }
      } else {
        this.eleData = []
      }
    },
  },
}
</script>
<style scoped lang="scss">
.table-border-black {
  tr {
    th,
    td {
      border-color: #333 !important;
      font-size: 1.25rem;
      line-height: 1.5;
    }
  }
}
</style>
